<template>
	<view>
		<view class="status-box">
			<view class="status-icon">
				<u-icon v-if="order_info.status != 1" name="close-circle-fill" color="#999999" size="80"></u-icon>
				<u-icon v-else name="checkmark-circle-fill" color="#5AC725"  size="80"></u-icon>
			</view>
			<view class="title">订单支付{{order_info.status == 1 ? '成功' : '失败'}}</view>
			<u-line></u-line>
			<view class="item-box" v-if="order_info">
				<view class="item">
					<view class="left">订单号</view>
					<view class="right">{{order_info.out_trade_no}}</view>
				</view>
				<view class="item">
					<view class="left">下单时间</view>
					<view class="right">{{vk.pubfn.timeFormat(order_info.create_time,"yyyy-MM-dd hh:mm:ss")}}</view>
				</view>
				<view class="item">
					<view class="left">支付方式</view>
					<view class="right">{{order_info.payment_type}}</view>
				</view>
				<view class="item">
					<view class="left">支付金额</view>
					<view class="right">{{(order_info.amount/100).toFixed(2)}}</view>
				</view>
				<view class="item" v-if="order_info.status != 1">
					<view class="left">失败原因</view>
					<view class="right">未支付</view>
				</view>
			</view>
			<u-line></u-line>
			
			<view class="bottom">
				<view class="confirm" @click="createPayment" v-if="order_info.status != 1">重新支付</view>
				
				<view class="confirm" @click="goHexiao" v-if="order_info.status == 1">核销领取</view>
				
				<view class="cancel" @click="goHome">返回首页</view>
			</view>
		</view>
		
		<vk-uni-pay
			ref="vkPay"
			:status.sync="vkPay.status"
			:code-url.sync="vkPay.codeUrl"
			:qrcode-image.sync="vkPay.qrcodeImage"
			:query-payment-action="vkPay.queryPaymentAction"
			:page-show="vkPay.pageShow"
			:auto-get-openid="vkPay.autoGetOpenid"
			:polling="vkPay.polling"
			:return-url="vkPay.returnUrl"
			:await-notify="vkPay.awaitNotify"
			:pay-order-info="vkPay.payOrderInfo"
		></vk-uni-pay>
	</view>
</template>

<script>
	export default {
		onLoad(options){
			let {out_trade_no} = options
			this.out_trade_no = out_trade_no
			this.form1.out_trade_no = out_trade_no
			this.getOrderInfo(out_trade_no)
		},
		data() {
			return {
				out_trade_no:null,
				order_info:null,
				vkPay: {
					/**
					 * 查询支付状态的云函数配置
					 * 如果是非路由框架，则action为字符串，值为云函数名称
					 * 如果是路由框架，则按下方配置填写
					 * 注意：queryPaymentAction内参数用默认即可，无需更改。（除非你已经知道参数的意义）
					 */
					queryPaymentAction: {
						name: "vk-pay", // 云函数名称
						action: "pay/queryPayment", // 路由模式下云函数地址
						actionKey: "action", // 路由模式下云函数地址的识别key
						dataKey: "data" // 路由模式下云函数请求参数的识别key
					},
					// PC支付的付款二维码地址，渲染二维码需要自己写，可以参考示例中的二维码组件 vk-uni-qrcode
					codeUrl: "",
					qrcodeImage: "",
					// 当前支付状态 0:等待发起支付 1:支付中 2:已支付（注意：跟数据库的status无关）
					status: 0,
					// 当前页面是否显示
					pageShow: true,
					// 启用轮询检测订单支付状态（仅h5支付有效）
					polling: true,
					// 仅微信手机外部浏览器H5支付时有效，必须是http或https开头的绝对路径，且在微信H5支付配置的域名白名单中。你还需要将此H5域名加入uniCloud白名单
					// 如果此值为空，则默认返回当前页面，返回的页面url参数会带上confirmShow=true&out_trade_no=实际订单号
					returnUrl: "",
					// 确认已支付的弹窗开关（微信手机外部浏览器H5支付时有效）
					confirmShow: false,
					// 支付成功后，是否需要等待异步回调全部执行完成后才通知前端（当awaitNotify和payOrderInfo均为false时，支付成功的响应速度最快）
					awaitNotify: true,
					// 支付成功后，是否需要返回支付订单数据（当awaitNotify和payOrderInfo均为false时，支付成功的响应速度最快）
					payOrderInfo: false,
					// 是否自动获取小程序的openid（若传false，则在createPayment时需要自己传对应的openid，一般服务商模式下需要传false）
					autoGetOpenid: true,
				},
				form1:{
					provider: "wxpay", // 支付供应商 wxpay 微信支付 alipay 支付宝支付
					total_fee: 1, // 支付金额（单位分，100=1元）
					out_trade_no: "", // 订单号
					subject: "测试订单标题", // 订单标题
					body: "测试订单详情", // 订单详情
					type: "recharge", // 支付回调类型
				}
			}
		},
		methods: {
			goHexiao(){
				console.log("核销")
				uni.reLaunch({
					url:`/pages/order/order_details/order_details?out_trade_no=${this.out_trade_no}`
				})
			},
			goHome(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			getOrderInfo(out_trade_no){
				vk.callFunction({
					url: '/client/pages/order/kh/get_order_info',
					title: '请求中...',
					data: {
						out_trade_no:this.out_trade_no
					},
				}).then((res) => {
						console.log('res',res)
						this.order_info = res.data
						this.form1.total_fee = res.data.amount
						this.form1.subject = res.data.payment_type
						this.form1.provider = res.data.platform 
						this.form1.body  = res.data.title + '商品租赁'
				});
			},
			createPayment(){
				console.log('我到底是不是人啊')
				let that = this
				let form1 = this.form1
				that.$refs.vkPay.createPayment({
					// 如果是非路由框架，则外层action不再是json，而为字符串，值为云函数名称，如 action: "你的云函数名称"
					// 如果是路由框架，则按下方配置填写
					// 如果云函数name为 vk-pay，则无需改动 action
					action: {
						name: "vk-pay", // 云函数名称
						action: "pay/createPayment", // 路由模式下云函数地址
						actionKey: "action", // 路由模式下云函数地址的识别key(注意VK路由框架下,此值为$url)
						dataKey: "data" // 路由模式下云函数请求参数的识别key
					},
					// 请求数据（data内的参数会传给云函数，云函数中通过 data.xxx 的方式获取）
					data: {
						provider: form1.provider,
						total_fee: form1.total_fee,
						out_trade_no: form1.out_trade_no,
						subject: form1.subject,
						body: form1.body,
						type: form1.type,
					},
					// 支付订单创建成功回调
					create: res => {
						console.log('pay-create', res);
						this.form1.out_trade_no = res.out_trade_no; // 如果订单号是云端生成的，这里可以拿到订单号，此处如果return false; 则不再执行后续逻辑
					},
					// 支付成功回调
					success: res => {
						// 此处一般是写支付成功的提示或跳转到支付成功的页面。
						uni.showToast({ title: "支付成功", icon: "success", mask: false });
						console.log("pay-success", res);
						this.getOrderInfo(this.out_trade_no)
					},
					// 失败回调
					fail: res => {
						console.error("pay-fail", res);
						if (res.failType === "create") {
							// 创建支付失败时提示
							uni.showModal({ title: "提示", content: res.msg, showCancel: false });
						} else if (res.failType === "request") {
							// 请求支付失败时提示
							uni.showToast({ title: "请求支付失败", icon: "none", mask: false });
						} else if (res.failType === "result") {
							// 支付结果失败时提示
							uni.showToast({ title: "支付失败", icon: "none", mask: false });
						}
						this.getOrderInfo(this.out_trade_no)
						
					},
					// 取消回调
					cancel: res => {
						uni.showToast({ title: "用户取消支付", icon: "none", mask: false });
						this.getOrderInfo(this.out_trade_no)
					}
				});
			},
		}
	}
</script>

<style lang="less" >
	page{
		background-color: #F5F5F5;
		
		.status-box{
			padding: 100rpx 30rpx 40rpx 30rpx;
			box-sizing: border-box;
			box-shadow: 0 0 10rpx rgba(141, 141, 141, 0.2);
			display: flex;
			flex-direction: column;
			
			border-radius: 10rpx;
			margin: auto;
			margin-top: 150rpx;
			width: 700rpx;
			background-color: white;
			position: relative;
			
			.title{
				text-align: center;
				margin-bottom: 40rpx;
				font-weight: bold;
			}
			
			.status-icon{
				position: absolute;
				background-color: white;
				top: -70rpx;
				border-radius: 50%;
				left: 50%;
				color: white;
				box-shadow:0 5rpx 10rpx rgba(124, 124, 124, 0.2);
				transform: translateX(-50%);
			}
			
			
			.item-box{
				padding: 30rpx 0;
				display: flex;
				flex-direction: column;
				gap:20rpx;
				.item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					
					.left{
						
					}
					
					.right{
						color: #838383;
						font-size: 26rpx;
					}
				}
			}
			
			.bottom{
				margin-top: 45rpx;
				.confirm,.cancel{
					width: 100%;
					padding: 22rpx 0;
					background-color: #E93323;
					color: white;
					border-radius: 80rpx;
					text-align: center;
				}
				
				.cancel{
					margin-top: 20rpx;
					color: #E93323;
					background-color: white;
					border-radius: 80rpx;
					border: 1px solid #E93323;
					color: #E93323;
				}
			}
		}
	}
</style>
